<template>
  <div id="login">
    <div class="box">
      <div class="item">
        <input type="text" v-model="name" placeholder="请输入用户名">
      </div>
      <div class="item">
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="item item2">
        <input type="text" v-model="verify" placeholder="请输入验证码">
        <span @click="createCode">{{code}}</span>
      </div>
      <div class="item item1" @click="loginto">
        <input style="cursor: pointer;" type="button" v-model="login">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      name: "",
      password: "",
      verify: "",
      code: "", //生成的
      login: "登录"
    };
  },

  computed: {},

  created() {
    this.createCode();
  },

  mounted() {},

  methods: {
    loginto() {
      if (!this.name) {
        this.$bus.$emit("toast", "账号不能为空");
      } else if (!this.password) {
        this.$bus.$emit("toast", "请输入密码");
      } else {
        this.validate();
      }
    },
    loading() {
      const jsonValue = {
        names: this.name,
        password: this.password
      };
      this.axios
        .post("http://xuanhaoqi.gotoip55.com/login.ashx",{
          "denglu" :  JSON.stringify(jsonValue)
        })
        .then(({data}) => {
          console.log(data);
          const jsonData = '{'+data+'}';
          const obj = JSON.parse(jsonData);
          if (obj.isSuccess=='false') {
            this.createCode();
            this.$bus.$emit("toast", obj.Msg);
          } else if (obj.isSuccess=='true') {
            this.$bus.$emit("toast", obj.Msg);          
            this.$router.push("HelloWorld");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    /* 检验输入的验证码的正确性 */
    validate() {
      var inputCode = this.verify.toUpperCase(); //输入的验证码
      var codeToUp = this.code.toUpperCase(); //随机生成的验证码
      // console.log(inputCode);
      // console.log(codeToUp);
      if (inputCode.length <= 0) {
        this.$bus.$emit("toast", "请输入验证码");
        return false;
      } else if (inputCode != codeToUp) {
        this.$bus.$emit("toast", "验证码输入错误");
        this.createCode();
        return false;
      } else {
        this.loading();
      }
    },
    createCode() {
      /* 生成验证码的函数 */
      var code = "";
      var codeLength = 4;
      var selectChar = new Array(
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 58);
        code += selectChar[charIndex];
      }
      if (code.length != codeLength) {
        this.createCode();
      }
      this.code = code;
      // console.log(code);
    }
  }
};
</script>
<style lang='scss' scoped>
#login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background: url(../assets/img/login.png) no-repeat;
  background-size: 100% 100%;
  .box {
    background: rgba(158, 197, 248, 0.5);
    width: 300px;
    height: 300px;
    margin: 30vh auto;
    border-radius: 5px;
  }
  .item input {
    padding-left: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    line-height: 40px;
    width: 250px;
    border-radius: 5px;
    font-size: 14px;
    background: transparent;
    border: 2px solid #2e9ada;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #666;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #666;
  }

  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #666;
  }

  input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #666;
  }
  .item1 input {
    background-color: #2e9ada;
    color: #fff;
    font-size: 16px;
  }
  .item2 input {
    width: 150px;
  }
  .item2 {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .item2 span {
    cursor: pointer;
    line-height: 40px;
    width: 80px;
    font-size: 20px;
    color: #fff;
    background-color: rgb(69, 161, 236);
    border-radius: 5px;
  }
}
</style>